<script>
import { reactive } from "vue";
import { useSendMsgCode } from "../hooks/useSendMsgCode";
import { useUpdatePwd } from "../hooks/useUpdatePwd";
import { registerApi } from "./api";
import { onUnmounted } from "vue";

export default {
  name: "Register",
  components: {},
  setup() {
    const state = reactive({
      hasMsgCode: false,
      surplus: -1,
      mode: "register",
      accountForm: {
        phone: "",
        yzm: "", // 验证码
        pwd1: "",
        pwd2: "",
      },
    });

    onUnmounted(() => {
      // 清除定时器
      state.sign && clearInterval(state.sign);
    });

    const registerPageConfig = {
      submitBtnText: "注册",
      noPwd1Text: "请设置登陆密码",
      noPwd2Text: "请确认登陆密码",
      pwd1Less: "登陆密码最少4位",
      pwd2Less: "确认登陆密码最少4位",
      submitApi: registerApi,
      successText: "注册成功",
    };
    // 发送短信页
    const sendMsgCodePage = useSendMsgCode(state);
    // 注册表单页
    const updatePwdPage = useUpdatePwd(state, registerPageConfig);

    return () => {
      return (
        <tz-view class="register">
          {state.hasMsgCode ? updatePwdPage() : sendMsgCodePage()}
        </tz-view>
      );
    };
  },
};
</script>

<style lang="scss">
.register {
  .preview {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .tz-form {
    background: $white;
    padding: 0 15px;
    width: 100%;
    margin-top: 16px;
  }
  .next-btn,
  .submit-btn {
    width: 345px;
    margin-top: 20px;
    height: 44px;
  }
  .update-form {
    .handle-block {
      display: flex;
      flex-direction: column;
      align-items: center;
      .protocol {
        margin-top: 6px;
        width: 345px;
        font-size: 13px;
        color: $info-color;
        .tz-text {
          text-decoration: underline;
        }
      }
    }
  }
}
</style>
